<script setup>
	import {
		reactive,
		nextTick
	} from 'vue'
	import {
		jumpTo,
		navigateTo
	} from '@/utils/common'

	import http from '@/api/chatsApi'

	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";

	import {
		useStore
	} from "@/stores/index"

	const userStore = useStore()

	const data = reactive({
		days: 1,
		current: 1,
		scrollTop: 0,
		userInfo: userStore.user.userInfo,
		page: 1,
		total: 0,
		list: [],
		value: '',

		group_num: 0,
		private_num: 0,
		public_num: 0,

		chatCount: {
			days: {
				public_num: {
					text_num: 0,
					picture_num: 0,
					video_num: 0,
					group_num: 0,
					voice_num: 0
				},
				private_num: {
					text_num: 0,
					picture_num: 0,
					video_num: 0,
					group_num: 0,
					voice_num: 0
				},
				group_num: {
					text_num: 0,
					picture_num: 0,
					video_num: 0,
					group_num: 0,
					voice_num: 0
				},
				now_count: 0
			},
			count_num: 0
		},
		
		publicSize:0
	})

	onLoad(async (options) => {
		data.days = +options.days;

		//个人信息记录
		const res2 = await http.chatCount(data.days);
		data.chatCount = res2.data;


		const res1 = await http.readNum();
		data.group_num = res1.data.group_num;
		data.private_num = res1.data.private_num;
		data.public_num = res1.data.public_num;

		//公开对应开放，定向对应分组
		await loadData();
	})

	const loadData = async () => {

		const res = await http.groupList(1, data.page, data.days);
		data.total = res.data.total;

		if (data.page > 1) {
			data.list = data.list.concat(res.data.data);
		} else {
			data.list = res.data.data;
		}
		
		if(Array.from(data.list).length>0){
			data.publicSize = data.list[0].size;
		}
		
		
	}

	const scrolltolower = async (e) => {
		data.page++;
		await loadData()
	}

	// const scrollToBottom = () => {
	// 	// 自动滚动到底部
	// 	nextTick(() => {
	// 		const query = uni.createSelectorQuery()
	// 		query.select('.dialogue-box').boundingClientRect()
	// 		query.select('.dialogue-box-content').boundingClientRect()
	// 		query.exec(res => {
	// 			const scrollViewHeight = res[0].height
	// 			const scrollContentHeight = res[1].height

	// 			if (scrollContentHeight > scrollViewHeight) {
	// 				const scrollTop = scrollContentHeight - scrollViewHeight
	// 				data.scrollTop = scrollTop
	// 			}
	// 		})
	// 	})
	// }

	const back = () => {
		jumpTo('/pages/room/index')
	}

	const goGroup = () => {
		jumpTo("/pages/exclusive/group?days=" + data.days)
	}

	const goPrivate = () => {
		jumpTo("/pages/exclusive/private?days=" + data.days)
	}

	const getSex = () => {
		switch (+data.userInfo.sex) {
			case 0:
			default:
				return "";
			case 1:
				return "先生";
			case 2:
				return "女士";
		}
	}
</script>

<template>
	<view class="header">
		<!-- <image class="back" @click="back" src="/static/icon/back.png" mode="aspectFit" /> -->
		<uni-icons class="back" type="back" @click="back" size="24" color="#828282"></uni-icons>
		<image src="/static/temp/banner.jpeg" mode="widthFix" />
	</view>

	<view class="avatar">
		<image :src="data.userInfo.avatar" mode="aspectFit" />
		<text>{{data.userInfo.realname}}&nbsp;{{getSex()}} IVMCR专属定制室·特权定制\n IVMCR Exclusive Customization Room</text>
	</view>

	<view class="nav">
		<view :class="{ isActive: true }">
			<text>开放式定制拆解过程
				<text class="icon">{{data.public_num}}</text>
			</text>
		</view>
		<view @click="goPrivate" v-if="data.userInfo.to_user_id">
			<text>私人
				<text class="icon">{{data.private_num}}</text>
			</text>
		</view>
<!-- 		<view @click="goGroup">
			<text>分组
				<text class="icon">{{data.group_num}}</text>
			</text>
		</view> -->
	</view>

	<text class="title">本天人数{{data.publicSize}}人</text>
	<text class="title count">
		{{
            `公开交互：第${data.chatCount.days.public_num.voice_num}次语音交互  ${data.chatCount.days.public_num.video_num}次视频交互  第${data.chatCount.days.public_num.text_num}次文字交互  ${data.chatCount.days.public_num.group_num}次资料交互  第${data.chatCount.days.public_num.picture_num}次图片交互
        私人交互：第${data.chatCount.days.private_num.voice_num}次语音交互  ${data.chatCount.days.private_num.video_num}次视频交互  第${data.chatCount.days.private_num.text_num}次文字交互  ${data.chatCount.days.private_num.group_num}次资料交互  第${data.chatCount.days.private_num.picture_num}次图片交互
        本日${data.userInfo.realname}&nbsp;${getSex()}定制总计交互次数：${data.chatCount.days.now_count}次
        截止到目前${data.userInfo.realname}&nbsp;${getSex()}整体定制的交互次数为：${data.chatCount.count_num}次`
        }}
	</text>
	
	<!-- 分组交互：第${data.chatCount.days.group_num.voice_num}次语音交互  ${data.chatCount.days.group_num.video_num}次视频交互  第${data.chatCount.days.group_num.text_num}次文字交互  ${data.chatCount.days.group_num.group_num}次资料交互  第${data.chatCount.days.group_num.picture_num}次图片交互 -->
	
	<!-- 内容区 -->
	<scroll-view scroll-y class="main" :scroll-with-animation="false" :scroll-top="data.scrollTop"
		@scrolltolower="scrolltolower">
		<text class="title">当天所有参与定制用户的全面归因 拆解 与策划逻辑 深度 方法论的开放式匿名分析 \n
因此所有当天策划用户均可以得到倍数级的关联与可能关联的更多定制化内容收获</text>

		<!-- <view class="content">
			<view class="message">
				<image class="avatar" src="/static/temp/01.jpeg" mode="aspectFit" />
				<uni-msg :src="'/static/temp/02.jpeg'" />
			</view>
			<view class="message" :class="{ isMy: false }">
				<image class="avatar" src="/static/temp/01.jpeg" mode="aspectFit" />
				<uni-msg :video="'/static/temp/02.jpeg'" />
			</view>
		</view> -->

		<view class="group" @click="navigateTo('/pages/exclusive/exclusive?id='+ item.id + '&isPublic=1'+'&name='+ item.group_name)"
			v-for="(item,index) in data.list" :key="index">
			<view class="avatar">
				<text class="tip">{{item.size}}</text>
				<image :src="item.avatar ? item.avatar:'/static/icon/function2.png'" mode="aspectFit" />
			</view>
			<text class="name">{{item.group_name}}</text>
			<uni-icons class="icon" type="forward" size="24" color="#828282"></uni-icons>
			<!-- <image class="icon" src="/static/icon/back.png" mode="aspectFit" /> -->
		</view>
	</scroll-view>
</template>

<style lang="scss" scoped>
	.header {
		padding-top: 40rpx;
		display: flex;
		align-items: center;

		>image {
			width: 528rpx;
		}

		.back {
			margin-left: 30rpx;
			margin-right: 60rpx;
			// width: 22rpx;
			// height: 22rpx;
		}
	}

	.avatar {
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		>image {
			margin-right: 5rpx;
			width: 87rpx;
			height: 87.65rpx;
		}

		>text {
			color: rgb(0, 0, 0);
			font-size: 12rpx;
			font-weight: 600;
			line-height: 1.2;
			text-align: center;
		}
	}

	.title {
		padding: 12rpx 88rpx 4rpx;
		color: rgb(0, 0, 0);
		font-size: 14rpx;
		font-weight: 600;
		line-height: 1.6;
		text-align: left;
	}

	.count {
		padding: 0 0 6rpx 100rpx;
		border-bottom: 1rpx solid rgb(208, 222, 233);
		box-sizing: border-box;
	}

	.nav {
		margin-top: 20rpx;
		display: flex;

		.isActive {
			.icon {
				display: none;
			}

			>text {
				color: #000;
			}
		}

		>view {
			flex: 1;
			width: fit-content;
			color: rgb(102, 102, 102);
			padding: 16rpx 0;
			font-size: 15rpx;
			font-weight: 600;
			line-height: 14rpx;
			text-align: center;

			>text {
				position: relative;
			}

			.icon {
				position: absolute;
				bottom: 6rpx;
				left: -30rpx;
				width: 30rpx;
				height: 30rpx;
				background: rgb(255, 218, 103);
				border-radius: 50%;
				color: rgb(255, 255, 255);
				font-size: 15rpx;
				font-weight: 600;
				line-height: 30rpx;
				text-align: center;
			}
		}
	}

	.main {
		height: calc(100% - 518rpx);
		// background-color: #ff0;


		.title {
			display: block;
			padding-top: 54rpx;
			margin-bottom: 44rpx;
			color: rgb(110, 110, 110);
			font-size: 14rpx;
			font-weight: 600;
			line-height: 1.6;
			text-align: center;
		}


		.group {
			margin-top: 34rpx;
			display: flex;
			align-items: center;
			padding-left: 40rpx;
			padding-right: 30rpx;

			.down {
				padding-bottom: 16rpx;
			}

			.avatar {
				position: relative;
				width: 87rpx;
				height: 87rpx;

				>image {
					width: 100%;
					height: 100%;
				}

				.tip {
					position: absolute;
					top: -15rpx;
					left: -15rpx;
					width: 30rpx;
					height: 30rpx;
					background: rgb(255, 218, 103);
					border-radius: 50%;
					color: rgb(255, 255, 255);
					font-size: 15rpx;
					font-weight: 600;
					line-height: 30rpx;
					text-align: center;
					z-index: 1;
				}
			}

			.name {
				margin-left: 50rpx;
				margin-right: auto;
				color: rgb(0, 0, 0);
				font-size: 20rpx;
				font-weight: 600;
				line-height: 14rpx;
				text-align: center;
			}

			.icon {
				// transform: rotate(180deg);
				// width: 22rpx;
				// height: 22rpx;
			}

			.subscribe {
				margin-right: -6rpx;
				width: 113rpx;
				height: 58rpx;
				border-radius: 10rpx;
				background: rgb(242, 242, 242);
				color: rgb(0, 0, 0);
				font-size: 20rpx;
				font-weight: 600;
				line-height: 58rpx;
				text-align: center;
			}
		}

		// .content {
		// 	padding: 0 34rpx;

		// 	.message {
		// 		display: flex;
		// 		margin-bottom: 40rpx;

		// 		&.isMy {
		// 			flex-direction: row-reverse;

		// 			// justify-content: flex-end;
		// 			.avatar {
		// 				margin-left: 26rpx;
		// 			}
		// 		}

		// 		.avatar {
		// 			margin-right: 26rpx;
		// 			width: 102rpx;
		// 			height: 96rpx;
		// 			box-sizing: border-box;
		// 			border: 0.5rpx solid rgb(61, 61, 61);
		// 			border-radius: 17rpx;
		// 			background: rgb(255, 255, 255);
		// 		}
		// 	}
		// }
	}
</style>